<template>
  <view class="azm-custom-index flex flex-direction h100 cus-relative">
    <navBar
      ref="navBar"
      :options="navigationBarOptions"
      mode="slot-custom"
      @navBarLoad="handleNavBarLoad"
      :slotHeight="176"
    >
      <view slot="custom">
        <view class=" nav custom-nav">
          <view
            class="cu-item cu-color"
            :class="index == TabCur ? 'text-black ac_cur' : ''"
            v-for="(item, index) in customNav"
            :key="index"
            @click="tabSelect"
            :data-id="index"
            >{{ item }}
          </view>
        </view>
      </view>

      <!-- 搜索 -->
      <view
        class="flex align-center justify-start bg-white cu-search-form zxl-rela"
        id="zxl-search"
      >
        <view class="cu-bar search bg-white lg flex-sub padding-ri0">
          <view class="search-form round cu-margin">
            <text class="tlIcon-search"></text>
            <input
              @click="GoSearch"
              disabled
              type="text"
              placeholder="可输入姓名、职位、手机号、公司名搜索"
              placeholder-class="input-placeholder"
            />
          </view>
        </view>
        <!-- 更多搜索 -->
        <view class="more-search bg-white" @click="open">
          <text class="tlIcon-shifting azm-more-icon"></text>
          <view class="more-search-num" v-if="searchNum > 0">{{
            searchNum
          }}</view>
        </view>
      </view>
    </navBar>
    <view class="flex-sub overflow-hidden zxl-rela">
      <!-- 搜索end -->
      <mescroll-ui
        ref="mescrollRef"
        @init="mescrollInit"
        @down="downCallback"
        @up="upCallback"
        :down="downOption"
        :up="upOption"
        :top="navBarTop"
        :bottom="bottom"
      >
        <noData
          v-if="dataList.length === 0"
          @callFun="changeNav"
          :TabCur="TabCur"
        ></noData>
        <have-data
          :dataList="dataList"
          :TabCur="TabCur"
          @callFun="initScroll"
          :isShowAdd="isShowAdd"
          :isShowTip="isShowTip"
        ></have-data>
      </mescroll-ui>
    </view>
    <searchPop ref="pop" :TabCur="TabCur" :bottom="bottom"></searchPop>
  </view>
</template>
<script>
import { mapState, mapGetters } from "vuex";
import UserOperatingMixins from "@u/Login/UserOperatingMixins.js";
import noData from "../../components/custom/nodata.vue";
import haveData from "../../components/custom/custom-list.vue";
import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
import mescrollUi from "@/components/mescroll-uni/mescroll-uni.vue";
import morePopups from "@/components/tl-ui/popups/more-popups.vue";
import searchPop from "../../components/custom/pop.vue";

export default {
  components: {
    noData,
    mescrollUi,
    morePopups,
    haveData,
    searchPop,
  },
  mixins: [UserOperatingMixins, MescrollMixin],
  computed: {
    ...mapState({
      userInfo: (state) => state.System.userInfo,
    }),
    ...mapGetters({
      customData: "Custom/getCustom",
      poolData: "Custom/getPool",
    }),
  },
  watch: {
    customData: {
      handler(newVal, oldVal) {
        this.initData(newVal, oldVal);
      },
    },
    poolData: {
      handler(newVal, oldVal) {
        // 初始化搜索数
        if (!this.isObjectValueEqual(newVal, oldVal)) {
          this.searchNum = 0;
          let data = newVal;
          let requestData = {};
          data.forEach((val) => {
            val.children.forEach((item) => {
              if (item.check) {
                this.searchNum++;
                // 搜索
                requestData[val.value] = item.value;
              }
            });
          });
          this.requestData = requestData;
          this.mescroll.resetUpScroll();
        }
      },
    },
  },
  data() {
    return {
      requestData: "", //请求数据
      baseUrl:
        "https://res.tuoluocard.com/card-enterprise/statics/icon/custom/",
      popIspen: false, //搜索框是否展示
      cusNum: 10, //查找客户数
      TabCur: 0, //tabbar默认客户
      navigationBarOptions: {
        title: "",
        placeholder: "输入同事名称进行搜索",
        disabled: true,
        backgroundColor: "#FFFFFF",
      },
      mescroll: null,
      customNav: ["客户", "线索池"],
      // 下拉刷新的常用配置
      downOption: {
        use: true, // 是否启用下拉刷新; 默认true
        auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
        native: false, // 启用系统自带的下拉组件,默认false;仅mescroll-body生效,mescroll-uni无效
      },
      // 上拉加载的常用配置
      upOption: {
        use: true, // 是否启用上拉加载; 默认true
        auto: true, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 10, // 每页数据的数量,默认10
        },
        toTop: {
          src: "",
        },
        noMoreSize: 1, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
        empty: {
          tip: " 您还没有客户，去线索池看看吧～",
          use: false,
        },
        textNoMore: "- 到底了 -",
      },
      // 列表数据
      dataList: [],
      popups: {
        show: false,
        x: 300,
        y: 229,
      },
      popupsList: [
        {
          title: "一般客户",
          status: 1,
          bg: "#0075FF",
        },
        {
          title: "重要客户",
          status: 2,
          bg: "#10CA5C",
        },
        {
          title: "已会面客户",
          status: 3,
          bg: "#FF9918",
        },
        {
          title: "已成交客户",
          status: 4,
          bg: "#FF4D00",
        },
      ],
      searchNum: 0,
      calHeight: "",
      isShowAdd: true, // 默认展示新增按钮
      isShowTip: false, //展示搜索条目
    };
  },
  mounted() {
    // 获取搜索条数
    let data = null;
    if (this.TabCur == 0) {
      data = this.customData;
    } else {
      data = this.poolData;
    }
    this.searchNum = 0;
    data.forEach((val) => {
      val.children.forEach((item) => {
        if (item.check) {
          this.searchNum++;
        }
      });
    });
    let that = this;
    uni.getSystemInfo({
      success(res) {
        let query = uni.createSelectorQuery().in(that);
        query.select("#zxl-search").boundingClientRect();
        query.exec((data) => {
          if (!data) return;
          that.calHeight = data[0].height + that.navBarTop + 50;
        });
      },
    });
  },
  props: {
    bottom: {
      type: Number,
      default: 50,
    },
  },
  methods: {
    // 回退刷新页面
    handleRefresh() {
      this.mescroll.resetUpScroll();
    },
    initData(newVal, oldVal) {
      // 初始化搜索数
      if (!this.isObjectValueEqual(newVal, oldVal)) {
        this.searchNum = 0;
        let data = newVal;
        let requestData = {};
        data.forEach((val) => {
          val.children.forEach((item) => {
            if (item.check) {
              this.searchNum++;
              // 搜索
              requestData[val.value] = item.value;
            }
          });
        });
        this.requestData = requestData;
        this.mescroll.resetUpScroll();
      }
    },
    isObjectValueEqual(a, b) {
      //取对象a和b的属性名
      var aProps = Object.getOwnPropertyNames(a);
      var bProps = Object.getOwnPropertyNames(b);
      //判断属性名的length是否一致
      if (aProps.length != bProps.length) {
        return false;
      }
      //循环取出属性名，再判断属性值是否一致
      for (var i = 0; i < aProps.length; i++) {
        var propName = aProps[i];
        if (a[propName] !== b[propName]) {
          return false;
        }
      }
      return true;
    },
    /*去搜索*/
    GoSearch() {
      uni.navigateTo({
        url: `/pages/custom/index?TabCur=${this.TabCur}`,
      });
    },
    tabSelect(e) {
      this.TabCur = e.currentTarget.dataset.id;
      // 切换tab默认值
      this.mescroll.resetUpScroll();
      // 获取搜索条数
      let data = null;
      this.searchNum = 0;
      if (this.TabCur == 0) {
        data = this.customData;
      } else {
        data = this.poolData;
      }
      data.forEach((val) => {
        val.children.forEach((item) => {
          if (item.check) {
            this.searchNum++;
          }
        });
      });
    },
    /**无数据跳转线索池*/
    changeNav(v) {
      this.TabCur = v; //线索池
      // 切换tab默认值
      this.mescroll.resetUpScroll();
      // 获取搜索条数
      let data = null;
      this.searchNum = 0;
      if (v == 0) {
        data = this.customData;
        data.forEach((val) => {
          val.children.forEach((item) => {
            if (item.check) {
              this.searchNum++;
            }
          });
        });
      } else {
        data = this.poolData;
        data.forEach((val) => {
          val.children.forEach((item) => {
            if (item.check) {
              this.searchNum++;
            }
          });
        });
      }
    },
    // 客户列表
    loadData(data) {
      return this.$ajax.Customer.searchMemberList(data);
    },
    // 线索池
    loadPoolData(data) {
      return this.$ajax.Customer.pool(data);
    },
    initScroll() {
      this.mescroll.resetUpScroll();
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll;
    },
    /*下拉刷新的回调, 有三种处理方式:*/
    downCallback(mescroll) {
      this.isShowAdd = false; //下拉的时候隐藏新增按钮
      mescroll.resetUpScroll();
      setTimeout(() => {
        this.isShowTip = true;
      }, 300);

      setTimeout(() => {
        this.isShowTip = false;
      }, 3000);
    },
    /*上拉加载的回调*/
    async upCallback(mescroll) {
      const vm = this;
      const { isEmptyObject, isEmptyArray } = vm.$util.jude;
      const page = mescroll.num;
      let page_size = mescroll.size;
      let requestData = {
        page: page,
        pageSize: page_size,
      };
      this.requestData = { ...this.requestData, ...requestData };
      this.isShowAdd = true; //请求结束后展示增按钮
      let result = null;
      try {
        if (this.TabCur == 0) {
          result = await vm.loadData(this.requestData);
        } else {
          result = await vm.loadPoolData(this.requestData);
        }

        if (result.code === 0 && !isEmptyObject(result.data, true)) {
          const info = result.data;
          const curPageData = isEmptyArray(info.data) ? [] : info.data;
          curPageData.forEach((val) => {
            val.statusClass = `cus-bg-${val.customer_type}`;
            val.navType = vm.TabCur;
            if (val.avatar == "") {
              val.simpleName = val.name.charAt(0);
            }
            if (val.position && val.position.length > 6) {
              val.position = val.position.substring(0, 6);
            }
          });
          const total = info.total;
          mescroll.endByPage(curPageData.length, total);
          if (page === 1) vm.dataList = []; //如果是第一页需手动置空列表
          vm.dataList = vm.dataList.concat(curPageData); //追加新数据
        } else {
          mescroll.endByPage(0, 0);
          mescroll.endErr(); // 联网失败的回调,隐藏下拉刷新的状态
        }
      } catch (error) {
        mescroll.endByPage(0, 0);
        mescroll.endErr(); // 联网失败的回调,隐藏下拉刷新的状态
      }
    },
    /**
     *打开搜索框
     */
    open() {
      this.$refs.pop.open(true);
    },
    /**
     *新增
     */
    addOrModify() {
      uni.vibrateShort();
      this.$$router.push({
        path: "/pages/custom/add_modify/index",
        query: { type: "add" },
      });
    },
  },
};
</script>

<style scoped lang="scss">
.zxl-rela {
  position: relative;
}

.azm-custom-index {
  .cu-search-form {
    padding: 16rpx 14 * 2rpx;
    padding-top: 0;
    height: 82rpx;

    .cu-margin {
      margin: 0 9 * 2rpx 0 0;
    }

    .padding-ri0 {
      padding-right: 0;
    }
  }

  .more-search {
    position: relative;

    .azm-more-icon {
      font-size: 33 * 2upx;
    }

    .more-search-num {
      position: absolute;
      width: 36 * 1rpx;
      height: 36 * 1rpx;
      background: rgba(0, 117, 255, 1);
      color: #fff;
      text-align: center;
      border-radius: 50%;
      top: -10 * 1rpx;
      right: 0;
      font-size: 22 * 1rpx;
      font-weight: bold;
      line-height: 36 * 1rpx;
    }
  }
}

/* --定位 --*/
.cus-relative {
  position: relative;
}

.custom-nav {
  padding-left: 28 * 1rpx;
  font-size: 30 * 1rpx;
  font-weight: bold;
  height: 88rpx;

  .cu-item {
    margin: 0;
    padding: 0;
    transition: font-size 0.2s ease-in-out;

    &:first-child {
      margin-right: 43 * 1rpx;
    }
  }

  .cu-color {
    color: #a2a8a8;
  }

  .text-black {
    font-size: 38 * 1rpx;
    color: #313131;
  }
}
.cu-bar .search-form [class*="tlIcon-"],
.cu-bar .search-form [class*="cuIcon-"] {
  color: #cbd1d1;
   margin-right: 10upx;
}
</style>
